/*
 * @Descripttion: 解决安卓手机端，输入框获取焦点时，弹出的输入键盘遮住输入框问题
 * 如何使用：
 * 1.在需要用到的组件中，调用此方法：common.js/inputKeyboard()，
 * 2.并可获取到次方法全局变量vuex 中globalFocusFlag，
 * 3.具体使用demo，参照login.vue组件
 * @version:
 * @Author: luoyun
 * @Date: 2022-01-26 14:53:12
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-03-01 11:09:32
 */
import store from '@/store'

const common = {
  /**
   * 输入框获取焦点时，手机输入键盘抬起与放下
   * @param {string} focusFlag
   * 一个标记键盘是弹起的标记，当focusFlag=true时，
   * 表示键盘弹起了，false时，键盘收起了
   */
  inputKeyboard: (vm,e) => {

    const ua = window.navigator.userAgent.toLocaleLowerCase();
    const isIOS = /iphone|ipad|ipod/.test(ua);
    const isAndroid = /android/.test(ua);
    if (isAndroid) {
      const originHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.resizeHandler = () => {
        const resizeHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
        const activeElement = document.activeElement;
        if (resizeHeight < originHeight) {
          // alert('安卓-键盘-弹起')
          // 键盘弹起后逻辑
          if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) {
            store.commit("commonStore/SET_globalFocusFlag", true)
            setTimeout(() => {
              activeElement.scrollIntoView({ block: "center" }); //焦点元素滚到可视区域的问题
            }, 0);
          }
        } else {
          // alert('安卓-键盘-收起')
          // 键盘收起后逻辑
          store.commit("commonStore/SET_globalFocusFlag", false)
          if(activeElement.getAttribute("id")){
            store.commit("commonStore/SET_ACTIVE_TARGET_ID", null)
          }
          vm.globalFocusFlag = false
        }
      };

      window.addEventListener("resize", this.resizeHandler);
    }

    if (isIOS) {
      let isReset = true; //是否归位
      this.focusinHandler = () => {
        isReset = false; //聚焦时键盘弹出，焦点在输入框之间切换时，会先触发上一个输入框的失焦事件，再触发下一个输入框的聚焦事件
      };
      this.focusoutHandler = () => {
        isReset = true;
        setTimeout(() => {
          store.commit("commonStore/SET_globalFocusFlag", true)

          //当焦点在弹出层的输入框之间切换时先不归位
          if (isReset) {
            store.commit("commonStore/SET_globalFocusFlag", false)
            window.scroll(0, 0); //确定延时后没有聚焦下一元素，是由收起键盘引起的失焦，则强制让页面归位
          }
        }, 30);
      };

      document.body.addEventListener("focusin", this.focusinHandler);
      document.body.addEventListener("focusout", this.focusoutHandler);
    }
  }
}

export default common
